<template>
  <el-container>
    <el-header>
      <el-row :gutter="30" >
        <el-col :span="8">
          <el-button round style="font-size: 40px;height: 70px;width: 160px">首 页</el-button>
        </el-col>
        <el-col :span="6">
          <el-button @click="$router.push('/upload')" type="primary" style="width: 300px;font-size: 40px;">
            上传实案 <i class="el-icon-upload el-icon--right"></i>
          </el-button>
        </el-col>
        <el-col v-if="role" :span="4" >
          <el-button @click="$router.push('/userManagement')" type="success" plain style="width: 230px;font-size: 40px;">
          用户管理<i class="el-icon-user el-icon--right"></i>
          </el-button>
        </el-col>
        <el-col v-if="role" :span="3">
          <el-button @click="$router.push('/review')" type="success" plain style="width: 160px;font-size: 40px;">
            审核<i class="el-icon-circle-check el-icon--right"></i>
          </el-button>
        </el-col>
        <el-col :span="3">
          <el-dropdown @command="handleCommand">
            <el-button type="info" plain style="width: 160px;font-size: 40px;">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="0">退出登录<i class="el-icon-right el-icon--right"></i></el-dropdown-item>
              <el-dropdown-item command="1">查看收藏<i class="el-icon-star-on el-icon--right"/></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-header>
    <el-divider/>
    <el-main style="background-color: #81BEF7">
      <el-row>
        <el-col :span="24">
          <div style="text-align: center;">
            <el-card>
              <el-select class="sort-default" v-model="option">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
              <el-divider direction="vertical"></el-divider>
              <el-autocomplete
                  :trigger-on-focus="false"
                  v-model="searchContent"
                  placeholder="请输入搜索关键字"
                  class="search-input-default">
                <el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
              </el-autocomplete>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;margin-bottom: 20px" :gutter="20">
        <el-col :span="10" v-for="i in itemsForShow" :offset="1">
          <el-card shadow="hover" class="card" style="font-size: 28px;">
            <div slot="header" class="clearfix">
              <span><el-button @click="addFavorite(i)" icon="el-icon-star-off" circle></el-button></span>
              <el-button @click="$router.push(`/detail?cid=${i.cid}`)" style="float: right; padding: 3px 0;font-size: 40px;" type="text">查看详情</el-button>
            </div>
            <img :src="require('../assets/type'+i.type+'.png')" class="image">
            <div style="padding: 14px;">
              <el-row style="margin-left: 0px">
                <el-col :span="11">
                  上传时间: {{i.uploadtime.substring(0,10)}}
                </el-col>
                <el-col :span="10" style="margin-left: 80px">
                  适用机型: {{i.apply}}
                </el-col>
              </el-row>
              <el-row style="margin-top: 20px;margin-bottom: 20px; margin-left: 0px">
                <el-col :span="11">
                  发生时间: {{timeFilter(i.time)}}
                </el-col>
                <el-col :span="10" style="margin-left: 80px">
                  区域类型: {{areaFilter(i.areatype) }}
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
//可见的项目
import {getAllCases} from "@/api/case";

export default {
  name: 'HomePage',
  data() {
    return {
      searchHistory:[],
      searchContent:'',
      options: [{
        value: 0,
        label: '机型'
      }, {
        value: 2,
        label: '区域'
      }, {
        value: 3,
        label: '发生时间'
      }, {
        value: 4,
        label: '上传时间'
      }],
      option:0,
      //所有的item
      allItems:[],
      //需要展示的item
      itemsForShow:[],
      // 是否为管理员
      role:false
    }
  },
  methods: {
    /**
     * @returns {Boolean}
     * @param area
     */
    areaFilter(area){
      switch (area){
        case 0:
          return '高原';
        case 1:
          return '热带';
        case 2:
          return '寒带';
        case 3:
          return '温带';
        case 4:
          return '沿海';
        case 5:
          return '沙漠&戈壁';
      }
    },
    timeFilter(time){
      switch (time){
        case 0:
          return '2001-2005';
        case 1:
          return '2006-2010';
        case 2:
          return '2011-2015';
        case 3:
          return '2016-2020';
        case 4:
          return '2021-2025';
      }
    },
    addFavorite(item){
      let items = localStorage.getItem('favorite')
      if(items===null){
        items=[];
      }else items=JSON.parse(items)
      if(items.indexOf(item)>-1)return;
      items.push(item)
      localStorage.setItem('favorite',JSON.stringify(items));
      this.$message.success('收藏成功，请在个人中心中查看')
    },
    handleCommand(command) {
      switch (command){
        case '0':
          localStorage.removeItem('uid');
          localStorage.removeItem('role');
          this.$router.push('/');
          break;
        case '1':
          this.$router.push('/favorite')
          break;
      }
    },
  //加载历史搜索到搜索建议
  //进行搜索
    handleSearch(){
      if(this.searchContent===''){
        this.itemsForShow=this.allItems;
        return;
      }
      switch (this.option){
        //0机型
        case 0:
          this.itemsForShow = this.allItems.filter(item => item.apply.indexOf(this.searchContent)!==-1)
          break;
        case 1:
          this.itemsForShow = this.allItems.filter(item => item.areatype.indexOf(this.searchContent)!==-1)
          break;
        case 2:
          this.itemsForShow = this.allItems.filter(item => item.time.indexOf(this.searchContent)!==-1)
          break;
        case 4:
          this.itemsForShow = this.allItems.filter(item => item.uploadtime.indexOf(this.searchContent)!==-1)
          break;
      }
    },
  },
  async created() {
    let res = await getAllCases();
    if(res.state===true){
      this.allItems=res.message;
    }
    this.itemsForShow = this.allItems;
    this.role = localStorage.getItem('role')
  },
  beforeCreate() {
    if(!localStorage.getItem('uid')){
      this.$message({
        message: '请先登录',
        type: 'warning'
      })
      this.$router.push("/")
    }
  }
}
</script>

<style scoped>
  .sort-default {
    height: 50px;
    width: 100px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    background: no-repeat right top;
  }
  .search-input-default{
    width: 500px;
    height: 50px;
    text-align: center;
  }
  .card {
    margin: 10px;
    height: 600px;
    /*background-color: beige;*/
  }
  .image {
    margin-left: 25%;
    height: 350px;
    display: block;
  }
</style>
